<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>todolist</title>
		<style type="text/css">
			.list_con {
				width: 600px;
				margin: 50px auto 0;
			}
			
			.inputtxt {
				width: 550px;
				height: 30px;
				border: 1px solid #ccc;
				padding: 0px;
				text-indent: 10px;
			}
			
			.inputbtn {
				width: 40px;
				height: 32px;
				padding: 0px;
				border: 1px solid #ccc;
			}
			
			.list {
				margin: 0;
				padding: 0;
				list-style: none;
				margin-top: 20px;
			}
			
			.list li {
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid #ccc;
			}
			
			.list li span {
				float: left;
			}
			
			.list li a {
				float: right;
				text-decoration: none;
				margin: 0 10px;
			}
		</style>
		<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
	</head>

	<body>

		<div class="list_con">
			<h2>To do list</h2>
			<!--文本框-->
			<input type="text" name="" id="txt1" class="inputtxt">
			<!--添加按钮-->
			<input type="button" name="" value="增加" id="btn1" class="inputbtn">

			<ul id="list" class="list">
				<li>
					<span>学习html</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>
				<li>
					<span>学习css</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>
				<li>
					<span>学习javascript</span>
					<a href="javascript:;" class="up"> ↑ </a>
					<a href="javascript:;" class="down"> ↓ </a>
					<a href="javascript:;" class="del">删除</a>
				</li>
			</ul>

		</div>
	</body>
	<script type="text/javascript">
		//1.获取文本框的内容
		//2.都是点击“增加”按钮的时候，把内容追加ul的内部最后面去
		
		$('#btn1').click(function(){
			
			var oTxt = $('#txt1')
			
			if(oTxt.val() == ''){
				alert('请输入内容')
				return
			}
			//alert($('#txt1').val())
			
			//保存节点
			var oLi = '<li>'+
					'<span>'+oTxt.val()+'</span>'+
					'<a href="javascript:;" class="up"> ↑ </a>'+
					'<a href="javascript:;" class="down"> ↓ </a>'+
					'<a href="javascript:;" class="del">删除</a>'+
				'</li>'
			//把内容追加到ul的内部最后面
			$('#list').append(oLi)
			
			//清空内容
			oTxt.val('')
			
			//获取焦点
			oTxt.focus()
		})
		
		//删除按钮：把自己当前的li删掉
		$('body').delegate('.del','click',function(){
			$(this).parent().remove()
		})
		
		//上移：把自己的内容，添加到我的上一个li中
		$('body').delegate('.up','click',function(){
			
			//判断当前li的索引值,如果是0(到顶了)
//			if($(this).parent().index() == 0){
//				alert('亲，已经到顶了，不要再点了！！！')
//				return
//			}

			//判断我当前li的上一个，如果个数是0（我自己是最上面的那个）
			if($(this).parent().prev().length == 0){
				alert('亲，已经到顶了，不要再点了！！！')
				return
			}
			
			//$(this).parent().prev()  选择上一个li
			//$(this).parent().prev().before('321')   选择上一个li的外部（同级）之前去追加数据
			
			//把自己li的内容追加过去，并且要用li嵌套着，因为内容是没有li标签的
//			$(this).parent().prev().before('<li>'+$(this).parent().html()+'</li>')
//			$(this).parent().remove()

			//添加，添加li过去。.before( $(this).parent() )    等同于剪切过去
			$(this).parent().prev().before( $(this).parent() )
		})
		
		//下移：把自己的内容，添加到我的下一个li中
		$('body').delegate('.down','click',function(){
			//如果当前的索引值，跟li的总个数-1，相等的话（我这个是最后一个了）
			if($(this).parent().index() == $('#list li').length -1){
				alert('亲，到底了，不要再点了！！')
				return
			}
			
			
			$(this).parent().next().after( $(this).parent() )
		})
	</script>
</html>